<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>商户统计</title>
<link rel="stylesheet" type="text/css" href="../plugin/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="../src/lvdong/css/merchantStatistics.css">
<script src="../plugin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="../plugin/echarts.js" type="text/javascript" charset="utf-8"></script>
<script src="../plugin/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div class="title">
		<blockquote class="layui-elem-quote" style="font-size: 30px;">
			类型统计&nbsp;&nbsp;<span id="datetime"></span>
		</blockquote>
	</div>
	<div id="chart">
		<div id="storeRevenue" class="chartstyle"></div>
		<div id="shopVisits" class="chartstyle"></div>
		<div class="weektitle">最近一周消费额统计</div>
		<div id="weekRevenue" class="barchart"></div>
		<div class="weektitle">最近一周访问人次统计</div>
		<div id="weekVisits" class="barchart"></div>
	</div>
	<div class="title">
		<blockquote class="layui-elem-quote" style="font-size: 30px;">
			交易报表&nbsp;&nbsp;<span id="datetime"></span>
		</blockquote>
	</div>
	<div id="transaction">
		<table class="layui-hide" id="transactiontable" lay-filter="transactiontable"></table>
	</div>
	<script type="text/html" id="dateSelect">
		<div class="layui-inline">
			<label class="layui-form-label" style="width:90px;">开始日期</label>
			<div class="layui-input-inline">
				<div class="layui-form" >
					<select name="start" id="start" lay-filter="startform">
						<option value=""></option>
					</select>
				</div>
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label" style="width:90px;">截止日期</label>
			<div class="layui-input-inline">
				<div class="layui-form">
					<select name="end" id="end" lay-filter="endform">
						<option value=""></option>
					</select>
				</div>
			</div>
		</div>
		<div class="layui-inline" style="margin-left:50px" >
			<button type="button" class="layui-btn" lay-event="query">查询</button>	
		</div>
	</script>
	<script>
		layui.use('table', function() {
			var table = layui.table;
			table.render({
				elem : '#transactiontable',
				url : '',
				height : 'full-70',
				toolbar : '#dateSelect',
				cols : [ [ {
					field : 'store_id',
					width : 375,
					align : 'center',
					title : '序号'
				}, {
					field : 'store_name',
					width : 375,
					align : 'center',
					title : '商户名称'
				}, {
					field : 'store_type',
					width : 375,
					align : 'center',
					title : '商户类型'
				}, {
					field : 'total',
					width : 370,
					align : 'center',
					title : '交易金额(元)'
				} ] ]
			});
		});
	</script>
	<script>
		$(function() {
			$.post("selectOrderDate", function(result) {
				var size = result.length;
				layui.use('table', function() {
					var table = layui.table;
					table.reload('transactiontable', {
						url : "selectMerchantTransactions",
						where : {
							start : result[size - 2],
							end : result[size - 1]
						}
					});
				});
				for (var i = 0; i < size; i++) {
					$('#start').append(new Option(result[i]));
				}
				$('#start').val(result[size - 2]);
				$('#end').append(new Option(result[size - 1]));
				$('#end').val(result[size - 1]);
			});

			$.post("./storeTypeRevenueVisits", function(result) {
				var storeTypeRevenue = echarts.init(document
						.getElementById('storeRevenue'));
				var shopTypeVisits = echarts.init(document
						.getElementById('shopVisits'));
				var storeTypeRevenueOption = {
					title : {
						text : '商户类型消费统计',
						subtext : '顾客消费',
						left : 'center'
					},
					tooltip : {
						trigger : 'item',
						formatter : '{a} <br/>{b} : {c} ({d}%)'
					},
					legend : {
						orient : 'vertical',
						left : 'left',
						data : [ result[0].storeType, result[1].storeType,
								result[2].storeType, result[3].storeType,
								result[4].storeType ]
					},
					series : [ {
						name : '顾客消费总额',
						type : 'pie',
						radius : '55%',
						center : [ '50%', '60%' ],
						data : [ {
							value : result[0].revenue,
							name : result[0].storeType
						}, {
							value : result[1].revenue,
							name : result[1].storeType
						}, {
							value : result[2].revenue,
							name : result[2].storeType
						}, {
							value : result[3].revenue,
							name : result[3].storeType
						}, {
							value : result[4].revenue,
							name : result[4].storeType
						} ],
						emphasis : {
							itemStyle : {
								shadowBlur : 10,
								shadowOffsetX : 0,
								shadowColor : 'rgba(0, 0, 0, 0.5)'
							}
						}
					} ]
				};
				var shopTypeVisitsOption = {
					title : {
						text : '商户类型人次统计',
						subtext : '顾客访问人次',
						left : 'center'
					},
					tooltip : {
						trigger : 'item',
						formatter : '{a} <br/>{b} : {c} ({d}%)'
					},
					legend : {
						orient : 'vertical',
						left : 'left',
						data : [ result[0].storeType, result[1].storeType,
								result[2].storeType, result[3].storeType,
								result[4].storeType ]
					},
					series : [ {
						name : '访问人次',
						type : 'pie',
						radius : '55%',
						center : [ '50%', '60%' ],
						data : [ {
							value : result[0].visits,
							name : result[0].storeType
						}, {
							value : result[1].visits,
							name : result[1].storeType
						}, {
							value : result[2].visits,
							name : result[2].storeType
						}, {
							value : result[3].visits,
							name : result[3].storeType
						}, {
							value : result[4].visits,
							name : result[4].storeType
						} ],
						emphasis : {
							itemStyle : {
								shadowBlur : 10,
								shadowOffsetX : 0,
								shadowColor : 'rgba(0, 0, 0, 0.5)'
							}
						}
					} ]
				};
				storeTypeRevenue.setOption(storeTypeRevenueOption);
				shopTypeVisits.setOption(shopTypeVisitsOption);
			});
			$.post("./selectWeekStoreTypeRevenueVisits",
					function(result) {
						var weekRevenue = echarts.init(document
								.getElementById('weekRevenue'));
						var weekVisits = echarts.init(document
								.getElementById('weekVisits'));
						var weekRevenueOption = {
							tooltip : {
								trigger : 'axis',
								axisPointer : { // 坐标轴指示器，坐标轴触发有效
									type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
								}
							},
							legend : {
								data : [ result[0][0].storeType,
										result[0][1].storeType,
										result[0][2].storeType,
										result[0][3].storeType,
										result[0][4].storeType ]
							},
							grid : {
								left : '3%',
								right : '4%',
								bottom : '3%',
								containLabel : true
							},
							xAxis : {
								type : 'value'
							},
							yAxis : {
								type : 'category',
								data : [ '周一', '周二', '周三', '周四', '周五', '周六',
										'周日' ]
							},
							series : [
									{
										name : result[0][0].storeType,
										type : 'bar',
										stack : '总量',
										label : {
											show : true,
											position : 'insideRight'
										},
										data : [ result[0][0].revenue,
												result[1][0].revenue,
												result[2][0].revenue,
												result[3][0].revenue,
												result[4][0].revenue,
												result[5][0].revenue,
												result[6][0].revenue ]
									},
									{
										name : result[0][1].storeType,
										type : 'bar',
										stack : '总量',
										label : {
											show : true,
											position : 'insideRight'
										},
										data : [ result[0][1].revenue,
												result[1][1].revenue,
												result[2][1].revenue,
												result[3][1].revenue,
												result[4][1].revenue,
												result[5][1].revenue,
												result[6][1].revenue ]
									},
									{
										name : result[0][2].storeType,
										type : 'bar',
										stack : '总量',
										label : {
											show : true,
											position : 'insideRight'
										},
										data : [ result[0][2].revenue,
												result[1][2].revenue,
												result[2][2].revenue,
												result[3][2].revenue,
												result[4][2].revenue,
												result[5][2].revenue,
												result[6][2].revenue ]
									},
									{
										name : result[0][3].storeType,
										type : 'bar',
										stack : '总量',
										label : {
											show : true,
											position : 'insideRight'
										},
										data : [ result[0][3].revenue,
												result[1][3].revenue,
												result[2][3].revenue,
												result[3][3].revenue,
												result[4][3].revenue,
												result[5][3].revenue,
												result[6][3].revenue ]
									},
									{
										name : result[0][4].storeType,
										type : 'bar',
										stack : '总量',
										label : {
											show : true,
											position : 'insideRight'
										},
										data : [ result[0][4].revenue,
												result[1][4].revenue,
												result[2][4].revenue,
												result[3][4].revenue,
												result[4][4].revenue,
												result[5][4].revenue,
												result[6][4].revenue ]
									} ]
						};
						var weekVisitsOption = {
							tooltip : {
								trigger : 'axis',
								axisPointer : { // 坐标轴指示器，坐标轴触发有效
									type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
								}
							},
							legend : {
								data : [ result[0][0].storeType,
										result[0][1].storeType,
										result[0][2].storeType,
										result[0][3].storeType,
										result[0][4].storeType ]
							},
							grid : {
								left : '3%',
								right : '4%',
								bottom : '3%',
								containLabel : true
							},
							xAxis : {
								type : 'value'
							},
							yAxis : {
								type : 'category',
								data : [ '周一', '周二', '周三', '周四', '周五', '周六',
										'周日' ]
							},
							series : [
									{
										name : result[0][0].storeType,
										type : 'bar',
										stack : '总量',
										label : {
											show : true,
											position : 'insideRight'
										},
										data : [ result[0][0].visits,
												result[1][0].visits,
												result[2][0].visits,
												result[3][0].visits,
												result[4][0].visits,
												result[5][0].visits,
												result[6][0].visits ]
									},
									{
										name : result[0][1].storeType,
										type : 'bar',
										stack : '总量',
										label : {
											show : true,
											position : 'insideRight'
										},
										data : [ result[0][1].visits,
												result[1][1].visits,
												result[2][1].visits,
												result[3][1].visits,
												result[4][1].visits,
												result[5][1].visits,
												result[6][1].visits ]
									},
									{
										name : result[0][2].storeType,
										type : 'bar',
										stack : '总量',
										label : {
											show : true,
											position : 'insideRight'
										},
										data : [ result[0][2].visits,
												result[1][2].visits,
												result[2][2].visits,
												result[3][2].visits,
												result[4][2].visits,
												result[5][2].visits,
												result[6][2].visits ]
									},
									{
										name : result[0][3].storeType,
										type : 'bar',
										stack : '总量',
										label : {
											show : true,
											position : 'insideRight'
										},
										data : [ result[0][3].visits,
												result[1][3].visits,
												result[2][3].visits,
												result[3][3].visits,
												result[4][3].visits,
												result[5][3].visits,
												result[6][3].visits ]
									},
									{
										name : result[0][4].storeType,
										type : 'bar',
										stack : '总量',
										label : {
											show : true,
											position : 'insideRight'
										},
										data : [ result[0][4].visits,
												result[1][4].visits,
												result[2][4].visits,
												result[3][4].visits,
												result[4][4].visits,
												result[5][4].visits,
												result[6][4].visits ]
									} ]
						};
						weekRevenue.setOption(weekRevenueOption);
						weekVisits.setOption(weekVisitsOption);
					});
		});
	</script>
	<script>
		//根据数组的值获取相对应的下标
		Array.prototype.getArrayIndex = function(obj) {
			for (var i = 0; i < this.length; i++) {
				if (this[i] === obj) {
					return i;
				}
			}
			return -1;
		}
		//监听select实现select联动
		layui.use('form', function() {
			var form = layui.form;
			form.on('select(startform)', function(data) {
				$.post("selectOrderDate", function(result) {
					$("#end").html("");
					var currentindex = result.getArrayIndex(data.value);
					for (var j = currentindex + 1; j < result.length; j++) {
						$('#end').append(new Option(result[j]));
						form.render('select');
					}
					$('#end').val(result[currentindex + 1]);
				});
			});
		});
		layui.use('table', function() {
			var table = layui.table;
			var startdate = "";
			var enddate = "";
			table.on('toolbar(transactiontable)', function(obj) {
				switch (obj.event) {
				case 'query':
					startdate = $("#start").val();
					enddate = $("#end").val();
					table.reload('transactiontable', {
						url : "selectMerchantTransactions",
						where : {
							start : $("#start").val(),
							end : $("#end").val()
						}
					});
					$.post("selectOrderDate", function(result) {
						for (var i = 0; i < result.length; i++) {
							$('#start').append(new Option(result[i]));
						}
						$('#start').val(startdate);
						$("#end").html("");
						var currentindex = result.getArrayIndex(startdate);
						for (var j = currentindex + 1; j < result.length; j++) {
							$('#end').append(new Option(result[j]));
						}
						$('#end').val(enddate);
						layui.use('form', function() {
							var form = layui.form;
							form.render('select');
						});
					});
				}
				;
			});
		})
	</script>
</body>
</html>